<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>自定义表单</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="container">
                  <form>
                        <div class="custom-control custom-checkbox">
                              <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
                              <label class="custom-control-label" for="customCheck">自定义复选框</label>
                        </div>
                  </form>

                  <form>
                        <div class="custom-control custom-radio">
                              <input type="radio" class="custom-control-input" id="customRadio" name="example1">
                              <label class="custom-control-label" for="customRadio">自定义单选框</label>
                        </div>
                  </form>

                  <!-- 自定义单选框，显示在同一行 -->
                  <form>
                        <div class="custom-control custom-radio custom-control-inline">
                              <input type="radio" class="custom-control-input" id="customRadio1" name="example" value="customEX">
                              <label class="custom-control-label" for="customRadio1">自定义选择框1</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                              <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEX">
                              <label class="custom-control-label" for="customRadio2">自定义选择框2</label>
                        </div>
                  </form>

                  <!-- 自定义下拉菜单 -->
                  <form>
                        <select name="cars" class="custom-select-sm">
                              <option>自定义选择菜单</option>
                              <option>Google</option>
                              <option>Runoob</option>
                              <option>Taobao</option>
                        </select>
                        <select name="cars" class="custom-select-lg">
                              <option>自定义选择菜单</option>
                              <option>Google</option>
                              <option>Runoob</option>
                              <option>Taobao</option>
                        </select>
                  </form>

                  <form>
                        <!-- 自定义滑块 -->
                        <label for="customRange">自定义滑块控件</label>
                        <input type="range" class="custom-range" id="customRange" name="points1">
                        <!-- 默认滑块 -->
                        <input type="range" id="defaultRange" name="points2">
                  </form>

                  <from>
                        <!-- 自定义文件上传 -->
                        <div class="custom-file">
                              <input type="file" class="custom-file-input" id="customFile">
                              <label class="custom-file-label" for="customFile">选择文件</label>
                        </div>
                        <!-- 默认文件上传 -->
                        <input type="file" id="myFile" name="fileName2">
                  </from>
            </div>
      </body>
</html>